<template>
    <div class="fazhan web-inner">
        <div class="fazhan-img">
            <img src="../../static/img/fazhan1.png" alt="">
            <img src="../../static/img/fanzhan2.png" alt="">
            <img src="../../static/img/fazhan3.png" alt="">
            <img src="../../static/img/fazhan4.png" alt="">
        </div>
        <div class="fazhan-form">
            <div class="title">
                委託服務
            </div>
            <div class="form-main">
                <div class="form">
                    <div class="form-main">
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                            <el-form-item label="品牌名稱" prop="brand_name">
                                <el-input v-model="ruleForm.brand_name"></el-input>
                            </el-form-item>
                            <el-form-item label="委託服務" prop="apply_service">
                                <el-checkbox-group v-model="ruleForm.apply_service">
                                    <el-checkbox v-for="(item,index) in type" :label="item.title" name="type" :key="index">{{item.title}}</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="聯絡人" prop="name">
                                <el-input v-model="ruleForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="電話" prop="tel">
                                <el-input v-model="ruleForm.tel"></el-input>
                            </el-form-item>
                            <el-form-item label="行動電話" prop="m_phone">
                                <el-input v-model="ruleForm.m_phone"></el-input>
                            </el-form-item>
                            <el-form-item label="E-mail" prop="email">
                                <el-input v-model="ruleForm.email"></el-input>
                            </el-form-item>
                            <el-form-item label="Line" prop="line">
                                <el-input v-model="ruleForm.line"></el-input>
                            </el-form-item>
                            <el-form-item label="公司名稱" prop="company_name">
                                <el-input v-model="ruleForm.company_name"></el-input>
                            </el-form-item>
                            <el-form-item label="統一編碼" prop="company_code">
                                <el-input v-model="ruleForm.company_code"></el-input>
                            </el-form-item>
                            <el-form-item label="地址" prop="addr">
                                <el-input v-model="ruleForm.addr"></el-input>
                            </el-form-item>
                            <el-form-item label="品牌網址" prop="brand_web">
                                <el-input v-model="ruleForm.brand_web"></el-input>
                            </el-form-item>
                            <el-form-item label="FB" prop="brand_FB">
                                <el-input v-model="ruleForm.brand_FB"></el-input>
                            </el-form-item>
                            <el-form-item label="IG" prop="brand_IG">
                                <el-input v-model="ruleForm.brand_IG"></el-input>
                            </el-form-item>
                            <el-form-item label="主營業務" prop="main_bussiness">
                                <el-radio-group v-model="ruleForm.main_bussiness" >
                                    <el-radio label="住宿及餐飲">住宿及餐飲</el-radio>
                                    <el-radio label="批發及零售">批發及零售</el-radio>
                                    <el-radio label="服務">服務</el-radio>
                                    <el-radio label="其他">其他</el-radio>
                                </el-radio-group>
                                <div v-if="ruleForm.main_bussiness==='其他'">
                                    <el-input style="display: inline-block;width: 200px;margin: 10px;" v-model="main_bussiness"/>
                                </div>
                            </el-form-item>
                            <el-form-item label="店數" prop="store_info">
                                <el-radio-group v-model="ruleForm.store_info">
                                    <el-radio label="直營店">直營店</el-radio>
                                    <el-radio label="加盟店">加盟店</el-radio>
                                </el-radio-group>
                                <div>
                                    <el-input style="display: inline-block;width: 200px;margin: 10px;" v-model="store_info"/><span style="width: 20px">家</span>
                                </div>
                            </el-form-item>
                            <el-form-item label="驗證碼" prop="phrase">
                                <img  style="height: 40px;vertical-align: middle;cursor: pointer" :src="imgUrl" alt="">

                                <el-input style="display: inline-block;width: 200px;margin: 10px;" v-model="ruleForm.phrase"/>
                                <a @click="refresh" href="javascript:;">看不清？點擊刷新</a>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('ruleForm')">送出</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import qs from 'qs';
    export default {
        name: "fazhan",
        props:{
            brand_id:{
                type:String,
                default:() =>{
                return ""
            }
        }
    },
    data() {
        var checkPhone = (rule, value, callback) => {
            let mobilePatternTW = /^(\+886\s)?[0]{1}[9]{1}\d{8}$/;
            if(mobilePatternTW.test(value)){
                callback();
            }else{
                callback(new Error('請輸入正確的電話號碼'));
            }
        };
        var checkEmail=(rule, value, callback) => {
            var temp = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            if(value===""){
                callback(new Error('必填'));
            }
            if(!temp.test(value)){
                callback(new Error('請輸入正確的郵箱'));
            }
            callback();
        };
        var checkMainBussiness=(rule, value, callback) => {
            if(!value){
                callback(new Error('必填'));
            }
            if(value==="其他" && this.main_bussiness===""){
                callback(new Error('必填'));
            }
            callback();
        };
        var checkStoreInfo=(rule, value, callback) => {
            if(!value || this.store_info===""){
                callback(new Error('必填'));
            }
            callback();
        };
        return {
            ruleForm: {
                apply_service: [],
                name: '',
                tel: '',
                m_phone: '',
                email: '',
                line:'',
                company_name:'',
                company_code:'',
                addr:'',
                brand_name:'',
                brand_web:'',
                brand_FB:[],
                brand_IG:[],
                main_bussiness:[],
                store_info:[],
                phrase:""
            },
            main_bussiness:"",
            store_info:"",
            rules: {
                apply_service: [
                    { required: true, message: '必填', trigger: 'change' },
                ],
                name: [
                    { required: true, message: '必填', trigger: 'blur' }
                ],
                tel: [
                    { required: true, message: '必填', trigger: 'blur' }
                ],
                m_phone: [
                    { required: true,validator:checkPhone, trigger: 'blur' }
                ],
                email: [
                    { required: true,validator:checkEmail, trigger: 'blur' }
                ],
                line: [
                    { required: true, message: '必填',trigger: 'blur' }
                ],
                brand_name: [
                    { required: true,message: '必填', trigger: 'blur' }
                ],
                main_bussiness: [
                    { required: true,validator:checkMainBussiness, trigger: 'change' }
                ],
                store_info: [
                    { required: true,validator:checkStoreInfo, trigger: 'change' }
                ],
                phrase: [
                    { equired: true, message: '必填', trigger: 'blur' }
                ],
            },
            type:[
                {
                    title:"委託加盟中介"
                },
                {
                    title:"委託品牌代理"
                },
                {
                    title:"委託顧問服務"
                },
            ],
            type1:[
                {
                    title:"企業品牌識別設計"
                },
                {
                    title:"空間規劃設計"
                },
                {
                    title:"連鎖加盟系統"
                },
                {
                    title:"連鎖顧問輔導"
                },
                {
                    title:"連鎖課程咨詢"
                },
                {
                    title:"創業輔導"
                },
                {
                    title:"國際代理推廣"
                },
                {
                    title:"展店服務"
                },
                {
                    title:"產品研發教學"
                },
                {
                    title:"市場行銷規劃"
                },
                {
                    title:"吉祥物設計"
                },
                {
                    title:"包裝設計"
                },
                {
                    title:"網頁設計"
                },
                {
                    title:"媒體宣傳"
                },
            ],
            options: [
                {
                    label: '10萬以下'
                },
                {
                    label: '10萬~20萬'
                }, {
                    label: '20萬~50萬'
                }, {
                    label: '50萬~100萬'
                }, {
                    label: '100萬以上'
                }
            ],
            imgUrl:"/webroot/session.php",
        }
    },
    mounted() {
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.sendData()
                } else {
                    console.log('error submit!!');
            return false;
        }
        });
        },
        refresh() {
            this.imgUrl="/webroot/session.php?"+new Date().getTime()
        },
        sendData() {
            let data = Object.assign({},this.ruleForm);
            data.apply_service = data.apply_service.join(",");
          if(data.main_bussiness==="其他"){
              data.main_bussiness=this.main_bussiness
          }
          data.store_info = data.store_info+this.store_info+"家";
            this.$http({
                method:"post",
                url:this.API.apply_brand,
                data:qs.stringify(data),
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                withCredentials:true
            }).then((res) => {
                this.refresh()
              if(res.data[0].code==="101"){
                this.resetForm("ruleForm");
                this.$alert(this.formTips, '成功', {
                  confirmButtonText: '确定',
                });
              }else{
                this.$alert(res.data[1].desc, '提示', {
                  confirmButtonText: '确定',
                });
              }
        })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.main_bussiness="";
            this.store_info="";
        },
    }
    }
</script>

<style scoped lang="less">
    @import "../style/base";
.fazhan{
    margin: 20px auto;
    .fazhan-img{
        display: flex;
        flex-direction: column;
        width: 100%;
        img{
            width: 100%;
        }
    }
    .fazhan-form{
        width: 100%;
        .title{
            width: 100%;
            height: 30px;
            background-color: @bgColor;
            text-align: center;
            color: #ffffff;
            font-size: 16px;
            line-height: 30px;
            margin-bottom: 20px;
        }
    }
}
</style>
<style lang="less">
    .el-checkbox-group{
        display: flex;
    }
</style>